<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box1 {
                width: 500px;
                height: 500px;
                padding: 100px;
                overflow: auto;
                background-color: #bfa;
                background-image: url('./img/2.jpg');
                background-repeat: no-repeat;
                background-position: 0 0;

                /* 
                  设置背景的范围 
                    background-clip
                    可选值:
                      border-box 默认值,背景会出现在边框的下边
                      padding-box 背景不会出现在边框上,只会出现在内容区和内边距
                      content-box 背景只会出现在内容区,

                    background-origin 背景图片偏移量计算的原点
                      padding-box 默认值,background-position 从内边距开始计算
                      content-box 背景图片的偏移量从内容区处开始计算
                      border-box  背景图片的变量从边框处开始计算
                */
                /* background-origin: border-box;
                background-clip: content-box; */

                /* 
                  background-size 设置图片的大小
                      第一个值表示宽度
                      第二个值表示高度
                        - 如果只写一个,则第二个值默认是auto(撑满)
                        - 也可以
                      
                      cover 图片的比例不变,将元素铺满
                      contain 图片的比例不变,将图片在元素中完整的显示
                */
                /* background-size: 200px auto; */

                background-size: contain;
                /* border: 10px red double; */
            }

            /* 
              background-color
              background-image
              background-repeat
              background-position
              background-size
              background-origin
              background-clip
              background-attachment

              - background 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置
                  并且该样式没有顺序要求,也没有哪个属性是必须写的

                  注意:
                    background-size必须写在background-position的后边,并且使用/隔开
                      background-position/background-size
                    
                    background-origin 和 background-clip 两个样式,orgin要在clip的前边
                
            
            */

            .box2 {
                width: 300px;
                height: 1000px;
                background-color: orange;
                background-image: url('./img/1.png');
                background-repeat: no-repeat;

                /* 
                  background-attachment
                    - 背景图片是否跟随元素移动
                    - 可选值:
                        scroll 默认值 背景图片会跟随元素移动
                        fixed  背景会固定在页面中,不会随元素移动
                        
                */
                background-position: content-box;
                background-attachment: scroll;
            }

            .box3 {
              width: 500px;
              height: 500px;
              background: #bfa url('./img/2.jpg') center center/content border-box content-box no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Possimus architecto doloribus voluptatem excepturi aspernatur
                natus quae blanditiis, aliquam mollitia voluptates
                exercitationem debitis praesentium dolor, quam voluptate veniam
                molestias molestiae dolorem. Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. A, voluptatum! Enim, nobis
                corrupti magni veniam debitis quasi, repellat fugiat eveniet
                repudiandae dolore modi. Animi rem accusantium impedit
                laudantium? Voluptates, tempora? Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Nemo voluptatem culpa eaque. Unde
                ad, omnis esse, odio ratione recusandae dolorum amet quaerat
                molestiae consequuntur, deserunt laborum vel vero asperiores
                corrupti!
            </div>
        </div>

        <div class="box3"></div>
    </body>
</html>
